<template>
	<view class="content">
		<view class="tabBox row">
			<view class="tab fill" v-for="(item,i) in tabList" :key="i" :class="active==item.val?'active':''" @click="active=item.val">未付账单</view>
		</view>
		<view class="mainBox">
			<view v-if="active==0">
				<view class="list">
					<view class="li liTop row">
						<view class="name fill">阿拉蕾公寓一期公寓一期公寓一期A栋601室</view>
						<view class="date red">已逾期130天</view>
					</view>
					<view class="li">账单周期：2022-12-01至2022-12-31</view>
					<view class="li">费用项目：租金</view>
					<view class="li">应付日期：2022年12月30日</view>
					<view class="li row">
						<view class="txt fill">账单金额：222.0</view>
						<view class="btn yellow" @click="$Foundation.goTo('')">详情>></view>
					</view>
				</view>
				<view class="list">
					<view class="li liTop row">
						<view class="name fill">阿拉蕾公寓一期公寓一期公寓一期A栋601室</view>
						<view class="date red">已逾期130天</view>
					</view>
					<view class="li">账单周期：2022-12-01至2022-12-31</view>
					<view class="li">费用项目：租金</view>
					<view class="li">应付日期：2022年12月30日</view>
					<view class="li row">
						<view class="txt fill">账单金额：222.0</view>
						<view class="btn yellow">详情>></view>
					</view>
				</view>
			</view>
			<view v-if="active==1">
				<view class="list">
					<view class="li liTop row">
						<view class="name fill">阿拉蕾公寓一期公寓一期公寓一期A栋601室</view>
					</view>
					<view class="li">账单周期：2022-12-01至2022-12-31</view>
					<view class="li">费用项目：租金</view>
					<view class="li">应付日期：2022年12月30日</view>
					<view class="li row">
						<view class="txt fill">账单金额：222.0</view>
						<view class="btn yellow">详情>></view>
					</view>
				</view>
				<view class="list">
					<view class="li liTop row">
						<view class="name fill">阿拉蕾公寓一期公寓一期公寓一期A栋601室</view>
					</view>
					<view class="li">账单周期：2022-12-01至2022-12-31</view>
					<view class="li">费用项目：租金</view>
					<view class="li">应付日期：2022年12月30日</view>
					<view class="li row">
						<view class="txt fill">账单金额：222.0</view>
						<view class="btn yellow">详情>></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				tabList:[
					{ title: '未付账单', val: 0 },
					{ title: '已付账单', val: 1 },
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.content{
	padding: 16rpx;
	.tabBox{
		padding: 0 40rpx;
		margin-bottom: 20rpx;
		.tab{
			text-align: center;
			height: 58rpx;
			line-height: 58rpx;
			background: #fff;
			border-radius: 6rpx;
			&.active{
				background: $uni-color-primary;
				color: #fff;
			}
		}
	}
	.list{
		background: #fff;
		border-radius: 16rpx;
		margin: 0 0 16rpx;
		padding: 32rpx;
		position: relative;
		overflow: hidden;
		.li{
			color: #666;
			line-height: 52rpx;
			&.liTop{
				margin-bottom: 8rpx;
				align-items: flex-start;
			}
			.name{
				color: #333;
				font-size: 30rpx;
				font-weight: bold;
				line-height: 44rpx;
			}
			.date{
				font-size: 30rpx;
				font-weight: bold;
				margin-left: 20rpx;
				line-height: 44rpx;
			}
			.txt{
				color: #666;
			}
			.btn{
				text-align: right;
				font-size: 32rpx;
			}
		}
	}
}
</style>
